<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import TodolistEl from './todolist_el.vue';
import TodolistVant from './todolist_vant.vue';

const isMobile = ref(false);
const Component = ref();

// 判断是否为移动端
function checkDevice() {
  const ua = navigator.userAgent;
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return mobileRegex.test(ua);
}

onMounted(() => {
  isMobile.value = checkDevice();
  Component.value = isMobile.value ? TodolistVant : TodolistEl;
});
</script>

<template>
  <component :is="Component" v-if="Component" />
</template>